﻿@model IEnumerable<CubicFWNet.Data.SystemManage.Model.Role>
@{
    ViewBag.Title = "角色管理";
}
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        角色管理
    </h1>
    <ol class="breadcrumb">
        <li><a href="@Url.Action("Index", "Home", new { area = "" })">首页</a></li>
        <li class="active"><a href="@Url.Action("Index", "Role")">角色管理</a></li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-sm-12">
            <div class="box box-solid">
                <div class="box-nav clearfix">
                    @using (Ajax.BeginForm("Index", new RouteValueDictionary { { "id", "" } },
                        new AjaxOptions { UpdateTargetId = "datatable", HttpMethod = "Get", InsertionMode = InsertionMode.Replace, LoadingElementId = "loadingPage", OnBegin = "$('#datatable').fadeOut('slow')", OnComplete = "$('#datatable').fadeIn('slow')" },
                        new RouteValueDictionary { { "id", "searchForm" }, { "class", "form-inline" } }))
                    {
                        <fieldset>
                            <button type="button" class="btn btn-primary" onclick="create();" title="新建"><i class="fa fa-plus-square"></i>&nbsp;新建</button>
                            <a class="btn btn-default" onclick="$.reload()" title="刷新"><span class="glyphicon glyphicon-refresh"></span></a>
                            <input id="keyWord" name="keyWord" type="text" class="form-control form-control-static" placeholder="角色名称" maxlength="50">
                            <button id="btn_search" type="submit" class="btn btn-primary"><i class="fa fa-search">查询</i></button>
                        </fieldset>
                    }
                </div>
                <div class="box-body" id="datatable">
                    @Html.Partial("_AjaxRoleTable", Model)
                </div>
            </div>
        </div>
    </div>
</section>
<!--编辑对话框-->
<div class="modal" id="editDlg" style="display: none">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">添加/修改角色</h4>
            </div>
            <form class="form-horizontal" id="frmedit" action="@Url.Action("Save", "Role")" method="post">
                <div class="modal-body">
                    <div class="nav-tabs-custom" style="margin-bottom:0;box-shadow:none;">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="false">基本信息</a></li>
                            <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="true">权限信息</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_1">
                                <div class="form-group">
                                    <input type="hidden" name="Id" class="form-control formId" id="Id" />
                                    <label class="col-sm-3 control-label no-padding-right"> *@Html.DisplayNameFor(model => model.Name) </label>
                                    <div class="col-sm-9">
                                        <input type="text" name="Name" class="form-control" id="Name" required maxlength="50"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for=""> @Html.DisplayNameFor(model => model.SortNo) </label>
                                    <div class="col-sm-9">
                                        <input type="number" class="form-control" id="SortNo" name="SortNo" value="0" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for=""> @Html.DisplayNameFor(model => model.Memo) </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="Memo" name="Memo" maxlength="1024" />
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="tab_2">
                                <div id="permissionTree"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="loadingPage" style="display: none;">
    <div class="loading-shade"></div>
    <div class="loading-content" onclick="$.loading(false)">@Resources.Global.LoadingMsg</div>
</div>

@section Scripts {
    @{Html.RegisterMvcPagerScriptResource();}
    
    <script>
        $(document).ready(function () {
            $('#footable').footable({ "sort": false });
            $("#frmedit").validate({
                submitHandler: function (form) {
                    var postData = $(form).formSerialize();
                    postData["moduleIds"] = String($("#permissionTree").getCheckedNodes());
                    postData["isModify"] = true;
                    //postData.push({
                    //    "name": "moduleIds",
                    //    "value": String($("#permissionTree").getCheckedNodes())
                    //});
                    $.submitForm({
                        url: $(form).attr("action"),
                        param: postData,
                        success: function (data) {
                            $.reload();
                        },
                        error: function (data) {
                            $.modalAlert(data.Message, data.Status);
                    }
                    });
                }
            });
        });

        //这个方式有bug，如果是通过编辑按钮打开的，再使用新建时，会把上次编辑的记录内容也带出来
        function initControl(id) {
            if (!id || typeof id == undefined) {
                id = $.NewGuid;               
            }
            $("#permissionTree").treeview({
                height: 300,
                showcheck: true,
                url: "/Role/GetPermissionTree",
                param: { roleId: id }
            });
        }

        function create() {
            initControl();
            $("#frmedit").formInit("Id");
            $('#editDlg').modal();
        }

        function edit(id) {
            if (!!id) {
                initControl(id)
                $.ajax({
                    url: "/Role/GetFormJson",
                    data: { id: id },
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        $("#frmedit").formSerialize(data);
                        $("#editDlg").modal();
                    }
                });
            }
        }

        function del(obj, id) {
            if (!!id) {
                $.deleteForm({
                    url: "/Role/Delete",
                    param: { id: id },
                    success: function () {
                        $(obj).parents("tr").remove();
                    }
                });
            }
        }


    </script>
}